import { WeaTableNew } from 'comsMobx';
import { observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TaskNodeAnalysis extends React.Component {
    render() {
        const { store } = this.props;
        const { analysisInfo } = store;
        const { all, doing, waiting, done } = analysisInfo;
        const itmes = [{
            title:getLabel('527459','全部节点') ,
            type:'all',
            number:all,
            style:{fontSize: '78px'}
        },{
            title:getLabel('527460','填报中节点') ,
            type:'doing',
            number:doing,
            style:{ fontSize: '72px', marginTop: '4px' }
        },{
            title:getLabel('527461','待填写节点') ,
            type:'waiting',
            number:waiting,
            style:{ fontSize: '72px', marginTop: '4px' }
        },{
            title:getLabel('527462','已填写节点') ,
            type:'done',
            number:done,
            style:{fontSize: '78px'}
        }];
        return (
            <div>
                <div className="edc-task-node-analysis">
                    {itmes.map(item=>{
                        return (
                            <div className="edc-task-node-analysis-item" style={this.getStyle(item.type)} onClick={() => this.clickType(item.type)}>
                                <i className="icon-portal-meeting" style={item.style} />
                                <div className="content" >
                                    <div className="number">{item.number}</div>
                                    <div className="font">{item.title}</div>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <div style={{ padding: '0px 75px' }} >
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@qt1b6h`} comsWeaTableStore={store.taskNodeTableStore} needScroll={true} hasOrder={true} />
                </div>

            </div>
        )
    }
    getStyle = (type) => {
        const { store } = this.props;
        const { taskNodeType } = store;
        const border =  `1px solid ${taskNodeType === type ? '1px solid rgb(0, 138, 255)' : 'rgb(213, 213, 213)'}`;
        const boxShadow = taskNodeType === type ? 'rgb(0, 138, 255) 0px 0px 5px' : undefined;
        switch (type){
            case "all": return {marginLeft: '3%',color: 'rgb(58, 200, 210)',border,boxShadow};
            case "doing": return {color: 'rgb(180, 125, 248)',border,boxShadow};  
            case "waiting": return {color: 'gray',border,boxShadow};  
            case "done": return {color: 'rgb(190, 198, 71)',border,boxShadow};  
        }
    }
    clickType = (type) => {
        const { store } = this.props;
        if (type !== store.taskNodeType) {
            store.taskNodeType = type;
            store.inittaskNodeAnalysis();
        }
    }
}